<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/jquery.metadata.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/lib/jquery.validate.min.js"></script>
		<title>科目列表</title>
		
		<style>
			form label {
				padding-right:10px;
				width:7em;
			}
		</style>
		
		<script>
			$(function(){
				$(".delete-subject").each(function(){
			 		   $(this).click(function(){
			 			  if(confirm("确定要删除吗？")){
			 			  }else{
			 				  $(this).attr("href","");
			 			  }
			  		  })
			    });
				
				//新增
				$("#addSubjcetSaveBtn").click(function(){
					if(true){
						if($("#addSubjectForm input[name='statusSelect']").prop("checked")){
							$("#addSubjectForm input[name='status']").val("1");
						}else{
							$("#addSubjectForm input[name='statusSelect']").val("0");
						} 
					} 
				});
	//修改		
				$(".edit-subject").click(function(){
						 $("#updateSubjectForm input[name='subId']").val($(this).parent().siblings().eq(0).text());
						 $("#updateSubjectForm input[name='name']").val($(this).parent().siblings().eq(1).text());
						 $("#updateSubjectForm input[name='description']").val($(this).parent().siblings().eq(2).text());
						 $("#updateSubjectForm input[name='testCount']").val($(this).parent().siblings().eq(3).text());
						 $("#updateSubjectForm input[name='totalTime']").val($(this).parent().siblings().eq(4).text());
						 $("#updateSubjectForm input[name='totalScore']").val($(this).parent().siblings().eq(5).text());
						 $("#updateSubjectForm input[name='status']").val($(this).parent().siblings().eq(6).find("input").val());
						 if($("#updateSubjectForm input[name='status']").val() == 1)
							$("#updateSubjectForm input[name='statusSelect']").prop("checked", true);
						 else
							$("#updateSubjectForm input[name='statusSelect']").prop("checked", false);
					}); 
					

				$("#updateSubjectSaveBtn").click(function(){
					if(true){
						if($("#updateSubjectForm input[name='statusSelect']").prop("checked")){
							var status = 1;
							$("#updateSubjectForm input[name='status']").val("1");
						}else{
							var status = 0;
							$("#updateSubjectForm input[name='status']").val("0");
						}
					}
				});
				
				//管理
				$(".manage-subject-student-btn").click(function(){
					var subId = $(this).parent().siblings().eq(0).text();
					$.ajax({
						type: 'POST',
						url: '${contextPath}/OnlineExam/teacher/getAllStudent',
						data: {
							subId: subId
						},
						dataType: 'JSON',
						success: function(data){
							var htmlString = "";
							var selectedUser = data.selectedUser;
							for(var i = 0; i <data.allUser.length; i++){
								var user = data.allUser[i];
								var checked = checkSelectedUser(selectedUser, user.userId) ? 'checked="checked"' : '';
								htmlString += '<div class="checkbox">';
								htmlString += '		<label>';
								htmlString += '			<input name="subjectStudent" class="ace ace-checkbox-2" type="checkbox" value="'
														+ user.userId + '"' + checked + '/>';
								htmlString += '			<span class="lbl">' + user.userName + '</span>';
								htmlString += '		</label>';
								htmlString += '</div>';
							}
							$("#subjectStudentContent").html(htmlString);
							$("#subjectId").val(subId);
						}
					});
					$("#modalSubjectName").text($(this).parent().siblings().eq(1).text());
				});
					
				$("#subjectStudentSaveBtn").on('click', function(){
					var subjectStudents = [];
					for(var i = 0; i < $('input[name="subjectStudent"]:checked').length; i++){
						subjectStudents[i] = $($('input[name="subjectStudent"]:checked')[i]).val();
					}
					$.ajax({
						type: 'POST',
						url: '${contextPath}/OnlineExam/teacher/saveSubjectStudent',
						data: {
							subjectStudents: subjectStudents,
							subId: $("#subjectId").val()
						},
						dataType: 'JSON',
						success: function(data){
							if(data.success){
								window.location.reload();
								alert('成功');
							}else{
								alert('失败');
							}
						}
					});
				});
				
				function checkSelectedUser(array, str){
					for(var i = 0; i < array.length; i++){
						if(array[i] == str)
							return true
					}
					return false;
				}
				
			});
		</script>
	</head>

	<body class="no-skin">
								<div class="row">
<div id="messageDiv">
<c:if test="${not empty message}">
		<script>
			alert('${message}');
		</script>
</c:if>
</div>
									<div class="col-xs-12">
										<a class="btn btn-xs btn-primary" data-toggle="modal" data-target="#addSubjectModal">
										<i class="ace-icon fa fa-plus"></i><span style="font-size:16px">添加科目</span>
										</a>
										<table id="sample-table-1" class="table table-striped table-bordered table-hover">
											<thead>
			<%-- <tr>
				<td><a href="changeLocaleSub?localType=en_US"><spring:message code="page.index.english" /></a></td>
				<td><a href="changeLocaleSub?localType=zh_CN"><spring:message code="page.index.chinese" /></a></td>
				<td colspan="7"></td>
			</tr>
												<tr>
													<th class="center">
														<label class="position-relative">
															<a href="addSub">
																<button class="btn btn-xs btn-success">
																	<i class="ace-icon fa fa-plus bigger-120"></i>
																</button>
															</a>
														</label>
													</th>
													<th><spring:message code="user.id.message"/></th>
													<th class="hidden-480"><spring:message code="subject.name.message"/></th>
													<th class="hidden-480"><spring:message code="subject.description.message"/></th>
													<th class="hidden-480"><spring:message code="subject.testCount.message"/></th>
													<th class="hidden-480"><spring:message code="subject.totalTime.message"/></th>
													<th class="hidden-480"><spring:message code="subject.totalScore.message"/></th>
													<th class="hidden-480"><spring:message code="subject.status.message"/></th>
													<th><spring:message code="user.action.message"/></th>
												</tr> --%>
												<tr>
													<th>科目编号</th>
													<th>科目名</th>
													<th>科目描述</th>
													<th>科目题数</th>
													<th>总时长</th>
													<th>满分总分</th>
													<th>是否开启考试</th>
													<th>操作</th>
												</tr>
											</thead>

											<tbody>
											<c:forEach items="${pageList.dates }" var="subject">
												<tr>
													<td>${subject.subId}</td>
													<td>${subject.name}</td>
													<td class="hidden-480">${subject.description }</td>
													<td>${subject.testCount}</td>
													<td>${subject.totalTime}</td>
													<td>${subject.totalScore}</td>
													<td>
														<c:choose>
															<c:when test="${subject.status == 0}">
																<input name="switch-field-1" value="${subject.status}" class="ace ace-switch ace-switch-6 subject-status" type="checkbox" disabled />
																<span class="lbl"></span>
															</c:when>
															<c:otherwise>
																<input name="switch-field-1" value="${subject.status}"  class="ace ace-switch ace-switch-6  subject-status" type="checkbox" checked disabled />
																<span class="lbl"></span>
															</c:otherwise>
														</c:choose>
													</td>
													<td>
														<a title="修改科目" class="btn btn-xs btn-primary edit-subject" data-toggle="modal" data-target="#updateSubjectModal">
															<i class="ace-icon fa fa-pencil bigger-120"></i>
														</a>
														<a title="删除科目" class="btn btn-xs btn-primary delete-subject" href="deleteSubject/${subject.subId }">
															<i class="ace-icon fa fa-trash-o bigger-120"></i>
														</a>
														<a title="管理科目学生" class="btn btn-xs btn-primary manage-subject-student-btn" data-toggle="modal" data-target="#subjectStudentModal">
															<i class="ace-icon fa fa-users bigger-120"></i>
														</a>
													</td>
												</tr>
												</c:forEach>
												<tr><td  colspan="8">
													<jsp:include page="/pager.jsp">
													<jsp:param name="url" value="${pageContext.request.contextPath}/teacher/toManageSubject"/>  
													<jsp:param name="items" value="${pageList.totalSize}"/> 
													<jsp:param name="pageSize" value="${pageList.pageSize}"/>  
													</jsp:include> 
												</td></tr>
											</tbody>
										</table>
									</div><!-- /.span -->
								</div><!-- /.row -->

<!--添加科目 模态框（Modal） -->
		<div class="modal fade" id="addSubjectModal" tabindex="-1" role="dialog" aria-labelledby="addSubjectModalLabel" aria-hidden="true">
  			  <div class="modal-dialog">
   			     <div class="modal-content">
         			   <div class="modal-header">
             				   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             				   <h4 class="modal-title" id="myModalLabel">添加科目</h4>
          			  </div>
           			  <div class="modal-body">
           			  	<form id="addSubjectForm" action="${contextPath}/OnlineExam/teacher/saveSubject" method="POST">
           			  		<!-- <form:input path="tel" placeholder="电话号码" class="col-xs-10 col-sm-5" /><form:errors path="tel" cssClass="error" cssStyle="color:red" /> -->
           			  		<p><label>科目编号:</label><input type="text" name="subId" placeholder="科目编号" required/></p>
           			  		<p><label>科目名:</label><input type="text" name="name" placeholder="科目名" required/></p>
           			  		<p><label>科目描述:</label><input type="text" name="description" placeholder="科目描述" required/></p>
           			  		<p><label>科目题数:</label><input type="text" name="testCount" placeholder="科目题数" required/></p>
           			  		<p><label>总时长:</label><input type="text" name="totalTime" placeholder="总时长" required/></p>
           			  		<p><label>满分总分:</label><input type="text" name="totalScore" placeholder="满分总分" required/></p>
           			  		<p><label>是否开启考试:</label><input type="checkbox" name="statusSelect" value="0" class="ace ace-switch ace-switch-6  subject-status" /><span class="lbl"></span></p>
           			  		<input type="hidden" name="status" value="0">
           			  	</form>
           			  </div>
            		  <div class="modal-footer">
                		  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                		  <button id="addSubjcetSaveBtn" type="submit" class="btn btn-primary" form="addSubjectForm">添加</button>
            		</div>
       		 	</div><!-- /.modal-content -->
   			</div><!-- /.modal -->
		</div>
		
<!--修改科目 模态框（Modal） -->
		<div class="modal fade" id="updateSubjectModal" tabindex="-1" role="dialog" aria-labelledby="updateSubjectModalLabel" aria-hidden="true">
  			  <div class="modal-dialog">
   			     <div class="modal-content">
         			   <div class="modal-header">
             				   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             				   <h4 class="modal-title" id="myModalLabel">修改科目</h4>
          			  </div>
           			  <div class="modal-body">
           			  	<form id="updateSubjectForm" action="${contextPath}/OnlineExam/teacher/updateSubject" method="POST">
           			  		<p><label>科目编号:</label><input type="text" name="subId" placeholder="科目编号" required readOnly /></p>
           			  		<p><label>科目名:</label><input type="text" name="name" placeholder="科目名" required/></p>
           			  		<p><label>科目描述:</label><input type="text" name="description" placeholder="科目描述" required/></p>
           			  		<p><label>科目题数:</label><input type="text" name="testCount" placeholder="科目题数" required/></p>
           			  		<p><label>总时长:</label><input type="text" name="totalTime" placeholder="总时长" required/></p>
           			  		<p><label>满分总分:</label><input type="text" name="totalScore" placeholder="满分总分" required/></p>
           			  		<p><label>是否开启考试:</label><input type="checkbox" name="statusSelect" value="0" class="ace ace-switch ace-switch-6  subject-status" /><span class="lbl"></span></p>
           			  		<input type="hidden" name="status" value="0">
           			  	</form>
           			  </div>
            		  <div class="modal-footer">
                		  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                		  <button id="updateSubjectSaveBtn" type="submit" class="btn btn-primary" form="updateSubjectForm">保存</button>
            		</div>			
       		 	</div><!-- /.modal-content -->
   			</div><!-- /.modal -->
		</div>
		
<!--管理 模态框（Modal） -->
		<div class="modal fade" id="subjectStudentModal" tabindex="-1" role="dialog" aria-labelledby="subjectStudentModalLabel" aria-hidden="true">
  			  <div class="modal-dialog">
   			     <div class="modal-content">
         			   <div class="modal-header">
             				   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             				   <h4 class="modal-title" id="myModalLabel">
             				  	 	管理学生科目<label id="modalSubjectName"></label>
             				   	</h4>
          			  </div>
           			  <div class="modal-body">
           			  	<input type="hidden" id="subjectId" />
           			  	<div id="subjectStudentContent"></div>
           			  </div>
            		  <div class="modal-footer">
                		  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                		  <button id="subjectStudentSaveBtn" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
            		</div>
       		 	</div><!-- /.modal-content -->
   			</div><!-- /.modal -->
		</div>

	</body>
</html>
